import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Checkbox, Form, FormItem, InputNumber, Plc, PlcGroup, Radio, RadioGroup, Segment, SegmentGroup, Table} from "../../../../packages";
import DATA from '../../../data/data-1.json';
import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
import Switch from "../../../../packages/components/Switch";


export const demo1 = designPage(() => {

  const state = reactive({
    data: DATA,
    size: undefined as any,
    summaryData: [
      {
        "id": 0,
        "color": "#79f285",
        "name": "Lisa",
        "date": "2002-04-28",
        "star": "★★★★★★★",
        "size": 49
      },
      {
        "id": 1,
        "color": "#f27990",
        "name": "George",
        "date": "2019-01-06",
        "star": "★★★★★★★★",
        "size": 74
      },
    ],
    other: {
      hasSummaryData: true,
      groupHead: true,
    },
    props: {
      headRowHeight: undefined,
      bodyRowHeight: undefined,
      border: false,
      virtual: false,
    },
    plc: {
      width: 200,
      align: 'left' as any,
      init: true,
      order: 5,
      hide: undefined,
    },
    editNode: null as null | iTableNode,
    onDblclickCell: (node: iTableNode) => {
      console.log('node', node);
      if (!!state.editNode) {
        if (node === state.editNode) {
          // node.saveEdit();
          // node.closeEdit();
          state.editNode = null;
          return;
        } else {
          // state.editNode.cancelEdit();
        }
      }

      // node.enableEdit();
      state.editNode = node;
    },
  });

  return () => (
    <DemoRow title={'基本用法'}>
      <Form column={1}>
        <FormItem label={'列宽度响应测试'}>
          <InputNumber v-model={state.plc.width} step={100}/>
        </FormItem>
        <FormItem label="表头行高">
          <InputNumber v-model={state.props.headRowHeight} step={5}/>
        </FormItem>
        <FormItem label="表体行高">
          <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
        </FormItem>
        <FormItem label="列销毁测试(名称)">
          <Switch v-model={state.plc.init}/>
        </FormItem>
        <FormItem label="大小尺寸">
          <SegmentGroup v-model={state.size}>
            <Segment label="Small" val="small"/>
            <Segment label="Middle" val="middle"/>
            <Segment label="Large" val="large"/>
          </SegmentGroup>
        </FormItem>
        <FormItem label="文本对齐方式">
          <RadioGroup v-model={state.plc.align}>
            <Radio label="left" val="left"/>
            <Radio label="center" val="center"/>
            <Radio label="right" val="right"/>
          </RadioGroup>
        </FormItem>
        <FormItem label="带边框">
          <Checkbox v-model={state.props.border}/>
        </FormItem>
        <FormItem label="合计行">
          <Switch v-model={state.other.hasSummaryData}/>
        </FormItem>
        <FormItem label="表头分组">
          <Switch v-model={state.other.groupHead}/>
        </FormItem>
        <FormItem label="启用虚拟滚动">
          <Switch v-model={state.props.virtual}/>
        </FormItem>
        {!state.other.groupHead && <>
          <FormItem label="order(名称)">
            <InputNumber v-model={state.plc.order}/>
          </FormItem>
          <FormItem label="hide:(评分)">
            <Switch v-model={state.plc.hide}/>
          </FormItem>
        </>}
      </Form>
      <Table
        data={state.data}
        summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
        onDblclickCell={state.onDblclickCell}
        {...state.props}
        size={state.size}
        showRows={10}
        virtual={state.props.virtual}
      >

        {!!state.other.groupHead && <>
          <Plc title={'普通文本列'} field={'id'}/>
          <Plc title={'设置宽度'} field={'id'} width={state.plc.width} align={state.plc.align}/>
          <Plc title={'大小'} field={'size'} align={state.plc.align}/>
          <PlcGroup title="联系方式" align={state.plc.align}>
            <Plc title={'地址'} field={'addr'} align={state.plc.align}/>
            <Plc title={'链接'} field={'url'} align={state.plc.align}/>
          </PlcGroup>
          <PlcGroup title={'地址'} align={state.plc.align}>
            <Plc field="date" title="日期" align={state.plc.align}/>
            {!!state.plc.init && <Plc field="name" title="名称" align={state.plc.align}/>}
            <Plc field="color" title="颜色" align={state.plc.align}/>
          </PlcGroup>
        </>}
        {!state.other.groupHead && <>
          <Plc field="id" title="编号(order=4)" order="4" align={state.plc.align}/>
          <Plc field="size" title="大小" align={state.plc.align}/>
          {!!state.plc.init && <Plc field="name" title="名称" order={state.plc.order} align={state.plc.align}/>}
          <Plc field="date" title="日期(order=6)" order="6" align={state.plc.align}/>
          <Plc field="color" title="颜色" align={state.plc.align}/>
          <Plc field="star" title="评分" hide={state.plc.hide} align={state.plc.align}/>
        </>}
      </Table>
    </DemoRow>
  );
});

const data = DATA.slice(0, 15);

export const DemoTableBasic = designPage(() => {
  return () => (
    <DemoRow title="基本">
      <div style={{ width: '50%' }}>
        <Table data={data} showRows={10}>
          <Plc field="id" title="ID"/>
          <Plc field="name" title="名称"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="size" title="大小"/>
        </Table>
      </div>
    </DemoRow>
  );
});

export const DemoTableHorizontalScroll = designPage(() => {
  return () => (
    <DemoRow title="横向纵向滚动">
      <div style={{ width: '50%' }}>
        <Table data={data} showRows={10} size="small">
          <Plc field="name" title="名称"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="size" title="大小"/>
          <Plc field="star" title="评分"/>
          <Plc field="addr" title="地址"/>
          <Plc field="url" title="链接"/>
          <Plc field="domain" title="域名"/>
          <Plc field="protocol" title="协议"/>
          <Plc field="email" title="邮件"/>
          <Plc field="ip" title="IP"/>
          <Plc field="flag" title="标识"/>
        </Table>
      </div>
    </DemoRow>
  );
});


export const DemoTableAutoHeight = designPage(() => {
  return () => (
    <DemoRow title="自动高度">
      <div style={{ width: '50%' }}>
        <Table data={data}>
          <Plc field="name" title="名称"/>
          <Plc field="date" title="日期"/>
          <Plc field="color" title="颜色"/>
          <Plc field="size" title="大小"/>
          <Plc field="star" title="评分"/>
          <Plc field="addr" title="地址"/>
          <Plc field="url" title="链接"/>
          <Plc field="domain" title="域名"/>
          <Plc field="protocol" title="协议"/>
          <Plc field="email" title="邮件"/>
          <Plc field="ip" title="IP"/>
          <Plc field="flag" title="标识"/>
        </Table>
      </div>
    </DemoRow>
  );
});
